<template>
  <div id="piao">
    <div class="img_box">
      <router-link to="/" exact>
        <div class="return-home">
          <span>
            <p class="el-icon-arrow-left"></p>返回
          </span>
          |
          <span>漂流瓶</span>
        </div>
      </router-link>
      <div class="container">
        <div class="put" @click="openDiv">
          <a>扔一个</a>
        </div>
        <div class="put" @click="openDialog">
          <a>捞一捞</a>
        </div>
        <!-- 捞瓶子 -->
        <div id="light" class="white_content container" ref="getbottle">
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="look1" v-for="bottle in bottleList" :key="bottle.bottleId">
                <el-row :gutter="10">
                  <el-col :xs="12" :sm="12" :md="10" :lg="8" :xl="6">
                    <div class="look_img">
                      <img :src="'/api/upload/' + bottle.bottleImg" alt />
                    </div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="14" :lg="16" :xl="18">
                    <div class="look_text">
                      <div class="look_user">
                        <a>
                          <img :src="'/api/upload/' + bottle.userImg" alt />
                        </a>
                        <span class="name1">
                          <a class="look_name">{{bottle.userName}}</a>
                          <a class="look_date">{{formateDate(bottle.bottleTime)}}</a>
                        </span>
                      </div>
                      <span>{{bottle.bottleContent}}</span>
                    </div>
                  </el-col>
                </el-row>

                <!-- <div class="评论"> -->
                <!-- <textarea class="comm-txt" maxlength="50"></textarea> -->
                <el-row :gutter="10">
                  <el-col :xs="15" :sm="17" :md="19" :lg="20" :xl="20" style=" visibility:hidden">1</el-col>
                  <el-col :xs="9" :sm="7" :md="5" :lg="4" :xl="4">
                    <a href class="comm-btn">扔回去</a>
                  </el-col>
                </el-row>
                <!-- </div> -->
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 扔瓶子 -->
        <div id="put_div" class="white_content" ref="sendbottle">
          <PiaoPost />
        </div>
      </div>
     
      <div>
         <!-- 瓶子 -->
        <div
          class="bottle animate__animated animate__wobble animate__infinite"
          @click="openDialog"
          @mouseover="enter()"
          @mouseout="leave()"
          style="--animate-duration:10s"
          ref="bottle"
        >
          <span>随机菜谱标题</span>
          <div>
            <img src="../assets/瓶子.png" alt />
          </div>
        </div>
        <!-- 鱼 -->
        <div class="yu1 animate__animated animate__slideInRight ">
          <img src="../assets/鱼1.png" alt />
        </div>
        <div class="yu2 animate__animated animate__slideInLeft" >
          <img src="../assets/鱼2.png" alt />
        </div>
        <div class="yu3 animate__animated animate__slideInLeft ">
          <img src="../assets/鱼3.png" alt />
        </div>
        <div class="yu4 animate__animated animate__slideInRight">
          <img src="../assets/鱼4.png" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
<script>
import PiaoPost from "../components/piao/PiaoPost.vue";
export default {
  data() {
    return {
      bottleList: [],
      imgpath: "1.jpg",
      file: null,
      textarea: "",
      getUser: [],
      userId: 0
    };
  },
  created() {
    this.$axios
      .get("/api/bottle/getBottle")
      .then(res => {
        // console.log('res:',res.data.data)
        this.bottleList = res.data.data;
        console.log("this.bottleList", this.bottleList);
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  components: {
    PiaoPost
  },
  methods: {
    goBack() {
      console.log("go back");
    },
    // 打开捞瓶子
    openDialog() {
      this.$refs.getbottle.style.display = "block";
    },
    // 打开扔瓶子
    openDiv() {
      this.$refs.sendbottle.style.display = "block";
    },
    // 时间格式转换
    formateDate: function(datetime) {
      function addDateZero(num) {
        return num < 10 ? "0" + num : num;
      }
      let d = new Date(datetime);
      let formatdatetime =
        d.getFullYear() +
        "-" +
        addDateZero(d.getMonth() + 1) +
        "-" +
        addDateZero(d.getDate()) +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return formatdatetime;
    }
  },
  // 监听自动刷新
  watch: {
    $route(to, from) {
      this.$router.go("/");
    }
  }
};
</script>
<style lang="css" scoped>
@import "../css/piao.css";

</style>
<style lang="css" scoped>
.el-page-header__title,
.el-page-header__left .el-icon-back {
  font-size: 20px;
}
.el-page-header__left::after {
  height: 25px;
  width: 2px;
}
.el-page-header {
  line-height: 50px;
}
.el-page-header__content {
  font-size: 20px;
  color: white;
}
</style>